<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/normal.css">
    <link rel="stylesheet" href="./css/login.css">
    <title>登录</title>
</head>
<body>
<div class="mask">
    <div class="box-main">
        <form action="${pageContext.request.contextPath}/loginServlet" method="post">
            <div class="input-user">
                <input value="zhangke" name="username" autocomplete="off" type="text" placeholder="请输入用户名">
            </div>

            <div class="input-pwd">
                <input value="123456" name="password" autocomplete="off" type="text" placeholder="请输入密码">
            </div>

            <div class="remember-pwd">
                <label>
                    <input type="checkbox">
                    <span>记住密码</span>
                </label>
            </div>

            <div class="input-submit">
                <input style="display: none" type="submit" id="submit"></input>
                <button class="btn color" type="button" onclick="loginHandle()">登录</button>
            </div>
        </form>
    </div>
</div>

<script>
    const msg = '${pageContext.request.getAttribute("msg")}';
    if(msg) alert(msg);

    function loginHandle() {
        const username = document.querySelector('input[name=username]').value;
        const password = document.querySelector('input[name=password]').value;

        if (!username || !password) {
            alert('用户名或密码不能为空！');
            return
        }

        document.querySelector('#submit').click();
    }
</script>
</body>
</html>
